<template>
    <!-- Header Start -->
    <div class="container-xxl py-5 bg-dark page-header bg-4 mb-5">
        <div class="container my-5 pt-5 pb-4">
            <h1 class="display-3 text-white mb-3 animated slideInDown"> 新闻中心 </h1>
            <p class="text-white fs-4">专注、迅捷、成就、分享</p>
        </div>
        <div id="goodat"></div>
    </div>
    <!-- Header End -->

    <!-- News Start-->
    <div class="container-xxl">
        <div class="container">
            <h2 class="mb-0 wow fadeInUp" data-wow-delay="0.6s"> 中心动态 </h2>
            <p class="mb-4 wow fadeInUp" data-wow-delay="0.6s"> CENTER FOR DYNAMIC </p>

            <div class="news-group">
                <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
                    <div v-for="newItem in tableIns.dataList" class="col item">
                        <div class="card shadow" @click="goDetail(newItem.Id)">
                            <div class="card-top">
                                <!-- <img
                                    :src="getPath(`images/news.webp`)"
                                    class="card-img-top"
                                    :alt="newItem.Id"
                                /> -->
                                <div class="card-item-top"></div>
                            </div>
                            <div class="card-body">
                                <h5 class="card-title"> {{ newItem.Title }}</h5>
                                <p class="card-text" v-html="trans(newItem.Content)"> </p>
                                <p style="font-size: 16px; color: #727272">{{
                                    fmtDate(newItem)
                                }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div
                    id="spinner2"
                    v-if="tableIns.loading"
                    class="show bg-white d-flex flex-column align-items-center justify-content-center"
                >
                    <div
                        class="spinner-border text-secondary"
                        style="width: 3rem; height: 3rem"
                        role="status"
                    >
                    </div>
                    <span class="sr-only text-secondary"></span>
                </div>
            </div>

            <Pagination
                :total="tableIns.totalCount"
                :page="tableIns.currentPage"
                :page-size="tableIns.pageSize"
                @update:page="tableIns.onCurrentPageChange"
            ></Pagination>
        </div>
    </div>
    <!-- News End-->
</template>

<script lang="ts" setup>
    import dayjs from 'dayjs';
    import Pagination from '@/components/pagination.vue';
    import usePagination, { loadPaginationRequest } from '@/utils/usePage';
    import request from '@/utils/request/index';
    import { onMounted } from 'vue';
    import { useRouter } from 'vue-router';
    const baseUrl = import.meta.env.VITE_APP_CONTEXT_PATH;

    const getPath = (path: string) => {
        return baseUrl + path;
    };

    const loadRequest: loadPaginationRequest = async ({ pageParams }) => {
        const data = await request<{
            Total: number;
            List: any[];
        }>({
            url: '/Notice/News',
            method: 'get',
            params: {
                companyId: 1,
                pageSize: pageParams!.pageSize,
                pageIndex: pageParams!.pageNo
            }
        });
        return Promise.resolve({ totalCount: Number(data.Total), dataList: data.List });
    };

    const tableIns = usePagination({
        paged: true,
        load: loadRequest
    });

    const router = useRouter();

    const fmtDate = (info: any) => {
        return dayjs.unix(info.UpdateTime).format('YYYY-MM-DD HH:mm:ss');
    };

    const goDetail = (id: string) => {
        router.push({ path: '/newsDetail', query: { id } });
    };

    const trans = (content: string) => {
        content = content.replace(/<[^>]+>/g, '');
        return content.slice(0, 50) + (content.length > 50 ? '...' : '');
    };

    onMounted(() => {
        tableIns.value.refresh(true);
    });
</script>

<style>
    .item {
        --bs-card-bg: #fff;
        --bs-border-radius: 10px;
        cursor: pointer;
        overflow: hidden;
    }
    .card-title {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #000;
    }
    .card-text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        line-clamp: 3;
        overflow: hidden;
        height: 50px;
    }
    .card-item-top {
        width: 100%;
        height: 200px;
        border-top-right-radius: var(--bs-border-radius);
        border-top-left-radius: var(--bs-border-radius);
        background: linear-gradient(rgba(43, 57, 64, 0.3), rgba(43, 57, 64, 0.3)),
            url(../images/news.webp) center center no-repeat;
        background-size: cover;
    }
</style>
